<template>
	<view class="container">
		<block v-if="isload">
			<view>
				<!-- titleArr: 选择项数组 dropArr: 下拉项数组 二维数组 @finishDropClick: 下拉筛选完成事件-->
				<!-- <cc-dropDownMenu :titleArr="titleArr" :dropArr="dropArr" style="position: fixed;z-index: 999;width: 100%;"
					@finishDropClick="finishClick"></cc-dropDownMenu> -->
				<view class="search-container">
					<view class="search-box">
						<image class="img" src="https://ksdaojiajia.com/mp-weixin/static/img/search_ico.png"></image>
						<input class="search-text" placeholder="搜索电话/地址/名称" placeholder-style="color:#aaa;font-size:24rpx"
							@input="searchConfirm" />
					</view>
				</view>
				<!-- <view  style="margin-top: 110rpx;"></view> -->
				<block v-for="(item, index) in datalist" :key="item.id">
					<view class="order-box" @tap="goto" :data-url="'jdorderdetail?id=' + item.id">
						<view class="head">
							<view style="font-size:35rpx;font-weight: bold;">
								<view><text>{{item.prolist[0].name}}</text></view>
							</view>
							<view class="flex1">
								<text style="font-size: 30rpx;margin-left: 10rpx;">x{{item.prolist[0].num}}</text>
							</view>

							<view style="font-size: 30rpx;font-weight: bold;color: black;" :data-index="index" @tap.stop="daohang">
								<text class="x1">{{item.juli2}}</text>
								<text class="x2">{{item.juli2_unit}}</text>
								<text style="color: green;margin-left: 10rpx;">导航</text>
							</view>
							<view :data-index="index" data-protype="0"
								style="display: flex;justify-content: center;align-items: center;" @tap.stop="daohang">
								<image style="height: 40rpx; width: 40rpx;" src="https://ksdaojiajia.com/mp-weixin/static/img/daohang.png"></image>
							</view>

						</view>
						<view class="content">
							<block v-if="!item.orderinfo.protype">
								<view style="display: flex;justify-content: center;align-items: center;">
									<image class="title_img1" :src="item.prolist[0].pic" :data-url="item.prolist[0].pic"
										mode="aspectFit" />
								</view>
								<view style="display: flex;justify-content: center;align-items: center;">
									<view class="f2">
										<view class="t3">{{item.orderinfo.address}}</view>
										<view class="divider"></view>
										<view>{{item.orderinfo.area}}</view>
										<view class="divider"></view>
										<view>用户信息：{{item.orderinfo.linkman}} {{item.orderinfo.tel}}</view>
									</view>
								</view>
							</block>
							<block v-else>
								<view class="f1" style="margin-top: 38rpx;">
									<view class="t3"><text class="x1">{{item.juli2}}</text><text
											class="x2">{{item.juli2_unit}}</text></view>
								</view>
								<view class="f2">
									<view class="t1">{{item.binfo.name}}</view>
									<view class="t2">{{item.binfo.address}}</view>
									<view class="t3">{{item.orderinfo.address}}</view>
									<view class="t2">{{item.orderinfo.area}}</view>
								</view>
								<view class="f3" @tap.stop="daohang" :data-index="index" data-protype="1"> ></view>
							</block>
						</view>
						<view class="f1">
							<!-- <image src="https://ksdaojiajia.com/mp-weixin/static/peisong/ps_time.png" class="img" /> -->
							期望上门：
							<text class="t1">{{item.orderinfo.yydate}}</text>
						</view>

						<view class="op">
							<view style="width: 50%;" v-if="item.ticheng > 0">
								<view style="font-weight: bold;color: green;">
									用户已支付
								</view>
								<view>
									服务到手：<text
										style="font-size: 35rpx;font-weight: bold;color: green;">{{item.ticheng}}</text>元
								</view>
							</view>
							<view style="width: 50%;" v-else @tap.stop="detail_price(item)">
								<view style="font-weight: bold;color: red;">
									自主谈价
								</view>
								<view>
									先做后付
									<text style="border: 1rpx solid #999;color: #999;padding: 0rpx 10rpx;margin-left: 10rpx;border-radius: 8rpx;font-size: 30rpx;">收费标准</text>
									<!-- <text style="font-size: 35rpx;font-weight: bold;color: black;">{{item.ticheng}}</text>元 -->
								</view>
							</view>



							<view v-if="item.over_time" class="btn1" style="background: #BCBFC7;width: 50%;">
								{{item.over_time}}后可接单
							</view>
							<view class="btn1" v-else style="width: 50%;" :data-id="item.id">接单</view>
						</view>
					</view>
				</block>

				<nomore v-if="nomore"></nomore>
				<nodata v-if="nodata"></nodata>
			</view>
			<!-- <view style="width:100%;height:120rpx"></view> -->
			<!-- <view class="bottom">
			<view class="my">
				<image src="https://ksdaojiajia.com/mp-weixin/static/img/my.png" class="img"/>
				<text>我的</text>
			</view>
			<view class="btn1" @tap="setpsst" data-st="1" v-if="psuser.status==0">暂停接单中</view>
			<view class="btn2" :style="{background:t('color1')}" @tap="setpsst" data-st="0" v-if="psuser.status==1">开启接单中</view>
		</view> -->
	
			<view class="tabbar">
				<view class="tabbar-bot"></view>
				<view class="tabbar-bar" style="background-color:#ffffff">
					<view @tap="goto" data-url="dating" data-opentype="reLaunch" class="tabbar-item">
						<view class="tabbar-image-box">
							<image class="tabbar-icon" :src="pre_url+'/static/img/peisong/home2.png'"></image>
						</view>
						<view class="tabbar-text active">大厅</view>
					</view>
					<view @tap="goto" data-url="jdorderlist" data-opentype="reLaunch" class="tabbar-item">
						<view class="tabbar-image-box">
							<image class="tabbar-icon" :src="pre_url+'/static/img/peisong/order.png'"></image>
						</view>
						<view class="tabbar-text">订单</view>
					</view>
					<view @tap="goto" data-url="jdorderlist?st=4" data-opentype="reLaunch" class="tabbar-item">
						<view class="tabbar-image-box">
							<image class="tabbar-icon" :src="pre_url+'/static/img/peisong/orderwc.png'"></image>
						</view>
						<view class="tabbar-text">已完成</view>
					</view>
					<view v-if="showform" @tap="goto" data-url="formlog" data-opentype="reLaunch" class="tabbar-item">
						<view class="tabbar-image-box">
							<image class="tabbar-icon" :src="pre_url+'/static/img/peisong/dangan.png'"></image>
						</view>
						<view class="tabbar-text">档案</view>
					</view>
					<view @tap="goto" data-url="my" data-opentype="reLaunch" class="tabbar-item">
						<view class="tabbar-image-box">
							<image class="tabbar-icon" :src="pre_url+'/static/img/peisong/my.png'"></image>
						</view>
						<view class="tabbar-text">我的</view>
					</view>
				</view>
			</view>
			
			<view>
				<view v-if="show_detail_price" class="popup">
					<view class="popup-box">
						<view style="font-size: 40rpx;text-align: center;">收费区间：</view>
						<view v-if="fee_range_arr.length > 0"  style="font-size: 30rpx;">
							<view v-for="(item, index) in fee_range_arr" :key="item.id">
								<view>收取用户 {{item[0]}}~{{item[1]}} 元，将扣除余额 {{item[2]}} 元</view>
							</view>
							<view>超出金额按照上述最大金额计算</view>
						</view>
						
						<view v-else style="font-size: 30rpx;">该订单完工后扣除余额 {{fee_range_str}} 元</view>
						
						<view class="btn-box">
							<view class="confirm btn" @click="detail_price">确定</view>
						</view>
					</view>
				</view>
			</view>


		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
		<view style="display:none">{{timestamp}}</view>
		<wxxieyi></wxxieyi>
	</view>
</template>

<script>
	var app = getApp();
	var interval2 = null;
	export default {
		data() {
			return {
				opt: {},
				loading: false,
				isload: false,
				menuindex: -1,
				pre_url: app.globalData.pre_url,
				st: 'all',
				datalist: [],
				pagenum: 1,
				nomore: false,
				nodata: false,
				interval1: null,
				timestamp: '',
				nowtime: '',
				showform: 0,
				nowtime2: '',
				titleArr: ['区域', '排序', '筛选订单'],
				dropArr: [
					// 区域
					[{
						text: '凯里市',
						value: ""
					}],
					//预约时间
					[{
						text: '按距离',
						value: "juli_sort"
					}, {
						text: '按时间',
						value: "yydate"
					}],
					// 筛选订单
					[{
						text: '默认',
						value: "quanbu"
					}]
				],
				filterResultData: ["","juli_sort",""],
				show_detail_price: false,
				fee_range_arr: [],
				fee_range_str: 0
			};
		},
		onLoad: function(opt) {
			app.showLoading('定位中...');
			this.opt = app.getopts(opt);
			if (app.globalData.needloads == 0) {
				// app.showLoading('定位中...');
				this.getdata();
				this.updatemylocation(true);
			} else {
				this.getdata();
			}
		},
		onUnload: function() {
			clearInterval(this.interval1);
			clearInterval(this.interval2);
		},
		onPullDownRefresh: function() {
			this.getdata();
		},
		onReachBottom: function() {
			if (!this.nodata && !this.nomore) {
				this.pagenum = this.pagenum + 1;
				this.getdata(true);
			}
		},
		methods: {
			changetab: function(st) {
				this.st = st;
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.getdata();
			},
			getdata: function(loadmore) {
				app.globalData.qid_count = 0;
				if (!loadmore) {
					this.pagenum = 1;
					this.datalist = [];
				}
				var that = this;
				var st = that.st;
				var pagenum = that.pagenum;
				var keyword = that.keyword;
				that.nodata = false;
				that.nomore = false;

				app.post('ApiYuyueWorker/dating', {
					st: st,
					pagenum: pagenum,
					keyword: keyword,
					filter: that.filterResultData[1]
				}, function(res) {
					if (res.status == 0) {
						app.alert(res.msg);
						return;
					}

					var data = res.datalist;

					if (pagenum == 1) {
						that.datalist = data;
						that.nowtime = res.nowtime
						that.nowtime2 = res.nowtime
						that.showform = res.showform;
						if (data.length == 0) {
							that.nodata = true;
						}
						that.loaded();
						that.updatemylocation(false);
						clearInterval(that.interval1);
						that.interval1 = setInterval(function() {
							that.updatemylocation(false);
							that.nowtime = that.nowtime + 10;
						}, 10000)

						if (res.isdelayed) {
							clearInterval(interval2);
							interval2 = setInterval(function() {
								that.nowtime2 = that.nowtime2 + 1;
								that.getdjs();
							}, 1000);
						}
					} else {
						if (data.length == 0) {
							that.nomore = true;
						} else {
							var datalist = that.datalist;
							var newdata = datalist.concat(data);
							that.datalist = newdata;
						}
					}

					if (res.worker_login) {
						//保存登录信息
						wx.setStorage({
							key: 'worker_login',
							data: {
								worker_admin: 1
							},
							success: function() {
								console.log('已登录');
							},
						});
					} else {
						wx.removeStorage({
							key: 'worker_login',
							success: function(res) {
								console.log("师傅未认证");
							}
						})
						app.confirm("请进行实名认证！", function() {
							app.goto("login?is_run=0", "reLaunch");
						});

					}
					app.showLoading(false);
				});
			},

			getdjs: function() {
				var that = this;
				var nowtime = that.nowtime2;
				for (var i in that.datalist) {
					var thisteam = that.datalist[i];
					var totalsec = thisteam.createtime * 1 + thisteam.delayedtime * 60 - nowtime * 1;
					if (totalsec <= 0) {
						that.datalist[i].isqd = true;
					} else {
						var houer = Math.floor(totalsec / 3600);
						var min = Math.floor((totalsec - houer * 3600) / 60);
						var sec = totalsec - houer * 3600 - min * 60;
						var djs = (min < 10 ? '0' : '') + min + '分' + (sec < 10 ? '0' : '') + sec + '秒';
					}
					that.datalist[i].djs = djs;
				}

			},
			updatemylocation: function(needload) {
				var that = this;
				app.getLocation(function(res) {
					var longitude = res.longitude;
					var latitude = res.latitude;
					var datalist = that.datalist;
					for (var i in datalist) {
						var thisdata = datalist[i];
						var rs = that.getdistance(thisdata.longitude2, thisdata.latitude2, longitude, latitude,
							1);
						thisdata.juli2 = rs.juli;
						thisdata.juli2_unit = rs.unit;
						thisdata.leftminute = parseInt((thisdata.yujitime - that.nowtime) / 60);
						datalist[i] = thisdata;
					}
					that.datalist = datalist;
					that.timestamp = parseInt((new Date().getTime()) / 1000);
					app.get('ApiYuyueWorker/updatemylocation', {
						longitude: longitude,
						latitude: latitude,
						t: that.timestamp
					}, function() {
						if (needload) {
							that.getdata();
							app.showLoading(false);
						}
						app.globalData.needloads++;
					});
				});
			},
			getdistance: function(lng1, lat1, lng2, lat2) {
				if (!lat1 || !lng1 || !lat2 || !lng2) return '';
				var rad1 = lat1 * Math.PI / 180.0;
				var rad2 = lat2 * Math.PI / 180.0;
				var a = rad1 - rad2;
				var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
				var r = 6378137;
				var juli = r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) *
					Math.pow(Math.sin(b / 2), 2)));
				var unit = 'm';
				if (juli > 1000) {
					juli = juli / 1000;
					unit = 'km';
				}
				juli = juli.toFixed(1);
				return {
					juli: juli,
					unit: unit
				}
			},
			// qiangdan: function(e, index) {
			// 	var that = this;
			// 	var id = e.currentTarget.dataset.id;
			// 	var st = e.currentTarget.dataset.st;
			// 	var notes = "";
			// 	var money = that.datalist[index].ticheng;

			// 	var cache = that.datalist[index].orderinfo.formdata;
			// 	if (cache.length == 0) {
			// 		if (money < 0) {
			// 			notes += "此单完成后，将会扣款" + money + "元";
			// 		} else {
			// 			notes += "确定要接单吗？";
			// 		}
			// 	} else {
			// 		notes += "工单要求：" + cache[0][1];
			// 	}
			// 	app.confirm(notes, function() {
			// 		app.showLoading('提交中');
			// 		app.post('ApiYuyueWorker/qiangdan', {
			// 			id: id
			// 		}, function(data) {
			// 			app.showLoading(false);
			// 			if (data.status == 2) {
			// 				app.error(data.msg);
			// 			} else {
			// 				app.success(data.msg);
			// 			}

			// 			setTimeout(function() {
			// 				if (data.status == 2)
			// 					that.getdata();
			// 				else
			// 					app.goto('jdorderlist');
			// 			}, 1000);
			// 		});
			// 	});
			// },
			daohang: function(e) {
				var that = this;
				var index = e.currentTarget.dataset.index;
				var datainfo = that.datalist[index];
				var protype = e.currentTarget.dataset.protype;
				var list = ['导航到用户'];
				// if (protype) {
				// 	list = ['导航到用户'];
				// }
				uni.showActionSheet({
					itemList: list,
					success: function(res) {
						if (res.tapIndex >= 0) {
							// if (res.tapIndex == 0) {
							// 	if (!protype) {
							// 		var longitude = datainfo.longitude
							// 		var latitude = datainfo.latitude
							// 		var name = datainfo.binfo.name
							// 		var address = datainfo.binfo.address
							// 	} else {
							// 		var longitude = datainfo.longitude2
							// 		var latitude = datainfo.latitude2
							// 		var name = datainfo.orderinfo.address
							// 		var address = datainfo.orderinfo.address
							// 	}
							// } else {
							// 	var longitude = datainfo.longitude2
							// 	var latitude = datainfo.latitude2
							// 	var name = datainfo.orderinfo.address
							// 	var address = datainfo.orderinfo.address
							// }
							var longitude = datainfo.longitude2
							var latitude = datainfo.latitude2
							var name = datainfo.orderinfo.address
							var address = datainfo.orderinfo.address
							uni.openLocation({
								latitude: parseFloat(latitude),
								longitude: parseFloat(longitude),
								name: name,
								address: address,
								scale: 13,
								success: function() {
									console.log('success');
								},
								fail: function(res) {
									console.log(res);
								}
							})
						}
					}
				});
			},
			searchConfirm: function(e) {
				var that = this;
				// 清除之前的定时器
				if (this.timer) {
				    clearTimeout(this.timer);
				}
				// 设置2秒延迟执行搜索操作
				this.timer = setTimeout(() => {
				    var keyword = e.detail.value;
				    that.keyword = keyword
				    that.getdata();
				}, 1000);
			},
			receiveMessage: function(data) {
				var that = this;
				if (data.type == 'peisong' || data.type == 'peisong_jiedan') {
					that.getdata();
				}
				return false;
			},
			finishClick(resultData) {
				this.filterResultData = resultData;
				this.getdata();
				// uni.showModal({
				// 	title: '温馨提示',
				// 	content: '筛选数据 = ' + JSON.stringify(resultData)
				// })
			},
			detail_price(item) {
				//先做后付价格详情
				// app.alert('价格表正在努力的制作啦~~');
				this.show_detail_price = !this.show_detail_price;
				
				if (item) {
					this.fee_range_arr = item.fee_range_arr;
					this.fee_range_str = item.ticheng;
				}
			}

		}
	};
</script>
<style>
	@import "./common.css";

	.container {
		width: 100%;
		display: flex;
		flex-direction: column
	}

	.search-container {
		width: 100%;
		height: 100rpx;
		padding: 20rpx 23rpx 20rpx 23rpx;
		background-color: #fff;
		position: relative;
		overflow: hidden;
		border-bottom: 1px solid #f5f5f5
	}

	.search-box {
		display: flex;
		align-items: center;
		height: 60rpx;
		border-radius: 30rpx;
		border: 0;
		background-color: #f7f7f7;
		flex: 1
	}

	.search-box .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 10rpx;
		margin-left: 30rpx
	}

	.search-box .search-text {
		font-size: 24rpx;
		color: #222;
		width: 100%;
	}

	.order-box {
		width: 94%;
		margin: 20rpx 3%;
		padding: 6rpx 3%;
		background: #fff;
		border-radius: 8px
	}

	.order-box .head {
		display: flex;
		width: 100%;
		border-bottom: 1px #f5f5f5 solid;
		height: 88rpx;
		line-height: 88rpx;
		overflow: hidden;
		/* color: #999; */
	}

	.order-box .head .f1 {
		display: flex;
		align-items: center;
		color: #222222
	}

	.order-box .head .f1 .img {
		width: 24rpx;
		height: 24rpx;
		margin-right: 4px
	}

	.order-box .head .f1 .t1 {
		color: #06A051;
		margin-right: 10rpx
	}

	.order-box .head .f2 {
		color: #a5c44d
	}

	.order-box .head .f2 .t1 {
		font-size: 36rpx;
		margin-right: 4rpx
	}

	.order-box .content {
		display: flex;
		justify-content: space-between;
		width: 100%;
		padding: 16rpx 0px;
		border-bottom: 1px solid #f5f5f5;
		position: relative
	}

	.order-box .content .f1 {
		width: 100rpx;
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t1 .x1 {
		color: #a5c44d;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t1 .x2 {
		color: #999999;
		font-size: 24rpx;
		margin-bottom: 8rpx
	}

	.order-box .content .f1 .t2 .img {
		width: 12rpx;
		height: 36rpx
	}

	.order-box .content .f1 .t3 {
		display: flex;
		flex-direction: column;
		align-items: center
	}

	.order-box .content .f1 .t3 .x1 {
		color: #a5c44d;
		font-size: 28rpx;
		font-weight: bold
	}

	.order-box .content .f1 .t3 .x2 {
		color: #999999;
		font-size: 24rpx
	}

	.order-box .content .f2 {
		flex: 1;
		padding: 0 20rpx
	}

	.order-box .content .f2 .t1 {
		font-size: 36rpx;
		color: #222222;
		font-weight: bold;
		line-height: 50rpx;
		margin-bottom: 6rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t2 {
		font-size: 24rpx;
		color: #222222;
		display: -webkit-box;
		/* -webkit-box-orient: vertical; */
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f2 .t3 {
		font-size: 30rpx;
		color: green;
		font-weight: bold;
		line-height: 50rpx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.order-box .content .f3 {
		width: 60rpx;
		height: 60rpx;
		/* font-size: 50rpx; */
		color: #a5c44d;
	}

	.order-box .op {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		padding: 20rpx 0px;
		border-top: 1px #f4f4f4 solid;
		color: #555;
	}

	.order-box .op .btn1 {
		width: 100%;
		background: linear-gradient(-90deg, #a5c44d 0%, #a5c44d 100%);
		;
		height: 88rpx;
		line-height: 88rpx;
		color: #fff;
		border-radius: 10rpx;
		text-align: center;
		font-size: 32rpx
	}

	.title_img1 {
		background-color: rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		/* 		max-width: 150rpx;
			max-height: 150rpx; */
		height: 150rpx;
		width: 150rpx;
		border-radius: 15rpx;
	}

	.divider {
		height: 1px;
		background-color: #ddd;
		/* 分割线颜色 */
	}
	
	.popup {
			width: 100%;
			height: 100%;
			position: fixed;
			top: 0;
			left: 0;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 9999;
	}
	
	.popup .popup-box {
		background-color: #fff;
		width: 80%;
		/* height: 40%; */
		margin: 60% auto 0rpx;
		padding: 20rpx; 
		border-radius: 10rpx; 
		box-sizing: border-box; 
		overflow: auto; 
		box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.5);
	}
	
	.popup .popup-box .btn-box{
		display: flex; 
	    justify-content: space-between;
		align-items: center;
		
	}
	
	.popup .popup-box .btn-box .btn{
		margin-top: 80rpx;
		width: 200rpx;
		height: 80rpx;
		line-height: 80rpx;
	}
	
	.popup .popup-box .btn-box .cancel{
		background-color: #fff;
		color: #000;
		border-radius: 10rpx; 
	    border: 1rpx solid #ccc; 
	    text-align: center;
	}
	.popup .popup-box .btn-box .confirm{
	    background-color: #1BA035;
	    color: #fff; 
	    border-radius: 10rpx; 
		text-align: center;
		width: 100%;
	}

</style>